<template>
	<div>
		<el-dropdown @command="handleCommand">
			<span class="avatar-dropdown">
				<el-avatar class="user-avatar" :src="avatar" style="width: 40px"></el-avatar>
				<div class="user-name">
					{{userName}}
				</div>
				<div class="user-name">
					<i class="el-icon-arrow-down el-icon--right"></i>
				</div>
			</span>
			<el-dropdown-menu slot="dropdown">
				<el-dropdown-item command="updateInfo">{{lan.updateInfo}}</el-dropdown-item>
				<el-dropdown-item command="updatePwd" divided>{{lan.changePwd}}</el-dropdown-item>
				<el-dropdown-item command="logout" divided>{{lan.loginOut}}</el-dropdown-item>
			</el-dropdown-menu>
		</el-dropdown>
		<update-pwd ref="updatePwd"></update-pwd>
		<update-info ref="updateInfo"></update-info>
	</div>
</template>

<script>
	import common from "@/common/common.js";
	import config from "@/common/config.js";
	import updateInfo from "@/pages/system/updateInfo.vue";
	import updatePwd from "@/pages/system/updatePwd.vue";
	export default {
		name: "VabAvatar",
		created() {
			window.VabAvatar = this;
		},
		computed: {
			avatar() {
				if (!this.$store.state.user.userHeader) {
					return "/static/img/inventor-2.png";
				}
				return this.$store.state.user.userHeader;
			},
			userName() {
				return this.$store.state.user.userName;
			},
			lan() {
				var lang = this.$store.state.language;
				var path = "VabAvatar";
				var r = lang[path];
				if (r == null) return {};
				return r;
			}
		},
		components: {
			updatePwd,
			updateInfo
		},
		methods: {
			handleCommand(command) {
				switch (command) {
					case "logout":
						this.logout();
						break;
					case "updateInfo":
						this.$refs.updateInfo.show();
						break;
					case "updatePwd":
						this.$refs.updatePwd.show();
						break;
				}
			},
			logout() {
				common.confirm({
					message: this.lan.confirm,
					success: () => {
						config.loginOut();
					},
				});
			},
		},
	};
</script>
<style lang="scss" scoped>
	.avatar-dropdown {
		display: flex;
		align-content: center;
		align-items: center;
		justify-content: center;
		justify-items: center;
		height: 50px;
		padding: 0;

		.user-avatar {
			width: 40px;
			height: 40px;
			cursor: pointer;
			border-radius: 50%;
		}

		.user-name {
			position: relative;
			margin-left: 5px;
			margin-left: 5px;
			cursor: pointer;
		}
	}
</style>
